.ea-drawer_wrap {
  position: fixed;

  width: 100%;
  height: 100%;

  z-index: 2001;

  .ea-drawer_drawer-wrap {
    position: absolute;

    display: flex;
    flex-direction: column;

    background-color: #fff;

    transition: left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;

    .ea-drawer_header-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;

      box-sizing: border-box;
      margin-bottom: 32px;
      padding: 20px 20px 0;

      color: #72767b;

      .ea-drawer_icon {
        cursor: pointer;
      }
    }

    .ea-drawer_main-wrap {
      flex: 1;

      box-sizing: border-box;
      padding: 20px;

      overflow: auto;
    }

    .ea-drawer_mask-wrap {
      position: fixed;

      width: 100%;
      height: 100%;

      background-color: rgba(0, 0, 0, 0.4);
      z-index: -1;

      opacity: 0;
      scale: 0;

      transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
    }
  }

  &.direction-ltr,
  &.direction-rtl {
    top: 0;

    .ea-drawer_drawer-wrap {
      top: 0;

      height: 100%;
    }
  }

  &.direction-ttb,
  &.direction-btt {
    left: 0;

    .ea-drawer_drawer-wrap {
      left: 0;

      width: 100%;
    }

    .ea-drawer_mask-wrap {
      left: 0;
    }
  }

  &.direction-ltr,
  &.direction-rtl,
  &.direction-ttb,
  &.direction-btt {
    &.is-open {
      .ea-drawer_mask-wrap {
        opacity: 1;
        scale: 1;
      }
    }

    &.will-close {
      .ea-drawer_mask-wrap {
        opacity: 0;
        scale: 0;
      }
    }
  }

  &.direction-ltr {
    left: -100%;

    .ea-drawer_drawer-wrap {
      left: -100%;
    }

    .ea-drawer_mask-wrap {
      left: 0;
    }

    &.is-open {
      left: 0;

      .ea-drawer_drawer-wrap {
        left: 0;
      }
    }

    &.will-close {
      .ea-drawer_drawer-wrap {
        left: -100%;
      }
    }
  }

  &.direction-rtl {
    right: -100%;

    .ea-drawer_drawer-wrap {
      right: -100%;
    }

    .ea-drawer_mask-wrap {
      right: 0;
    }

    &.is-open {
      right: 0;

      .ea-drawer_drawer-wrap {
        right: 0;
      }
    }

    &.will-close {
      .ea-drawer_drawer-wrap {
        right: -100%;
      }
    }
  }

  &.direction-ttb {
    bottom: -100%;

    .ea-drawer_drawer-wrap {
      bottom: -100%;
    }

    .ea-drawer_mask-wrap {
      bottom: 0;
    }

    &.is-open {
      bottom: 0;

      .ea-drawer_drawer-wrap {
        bottom: 0;
      }
    }

    &.will-close {
      .ea-drawer_drawer-wrap {
        bottom: -100%;
      }
    }
  }

  &.direction-btt {
    top: -100%;

    .ea-drawer_drawer-wrap {
      top: -100%;
    }

    .ea-drawer_mask-wrap {
      top: 0;
    }

    &.is-open {
      top: 0;

      .ea-drawer_drawer-wrap {
        top: 0;
      }
    }

    &.will-close {
      .ea-drawer_drawer-wrap {
        top: -100%;
      }
    }
  }
}
